<template>
	<section class="welfare-coupon-manage">
		<div class="manage-title">新建/编辑兑换券信息</div>

		<section class="manage-main">
			<el-form ref="form" v-loading="formloading" :model="form" :rules="rules" label-width="150px"
				class="main-form">
				<el-form-item label="兑换券名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入兑换券名称" />
				</el-form-item>
				<el-form-item label="兑换券数量" prop="total" class="coupon-num">
					<el-input-number style="width: 100%;" v-model="form.total" :min="1" :max="999999999" :step="1"
						step-strictly :controls="false" label="请输入兑换券数量"></el-input-number>
				</el-form-item>
				<el-form-item label="商品" prop="goodsId">
					<div v-if="!form.goodsId" class="selectbtn" @click="showGoods = true">选择商品</div>
					<template v-else>
						<div class="select-data">
							{{ form.goodsName }}
							<i class="el-icon-close" @click="clearGoods" />
						</div>
					</template>
				</el-form-item>
				<el-form-item label="使用时间" prop="time">
					<el-date-picker v-model="form.time" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" clearable :style="{width:'100%'}" type="datetimerange"
						format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" />
				</el-form-item>
			</el-form>
		</section>

		<div class="manage-footer">
			<el-button style="padding: 8px 30px;" @click="handleCancel">取消</el-button>
			<el-button style="padding: 8px 30px;" type="primary" @click="handleSubmit">确定</el-button>
		</div>
		<choose-comm v-if="showGoods" @cancel="showGoods = false" @comit="selectGoods" :activityd="id"></choose-comm>
	</section>
</template>
<script>
	import {
		insert,
		update,
		get
	} from './../api'
	import ChooseComm from '../components/commodity/index'
	export default {
		name: 'CouponManage',
		components: {
			ChooseComm
		},
		data() {
			return {
				state: 'create',
				formloading: false,
				form: {
					id: '',
					name: '',
					goodsId: '',
					time: '',
					total: '',
					goodsName: ''
				},
				rules: {
					name: [{
							required: true,
							message: '请输入兑换券名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 50,
							message: '长度在 1 到 50 个字符',
							trigger: 'blur'
						}
					],
					goodsId: [{
						required: true,
						message: '请选择商品',
						trigger: 'change'
					}],
					total: [{
						required: true,
						message: '请输入兑换券数量',
						trigger: 'blur'
					}],
					time: [{
						required: true,
						message: '请选择使用时间',
						trigger: 'blur'
					}]
				},
				showGoods: false
			}
		},
		created() {
			this.state = this.$route.query.t === 'c' ? 'create' : 'update'
			if (this.$route.query.t === 'u') {
				if (this.$route.query.i) {
					this.getData(this.$route.query.i)
				} else {
					this.$message({
						showClose: true,
						message: '参数异常！',
						type: 'warning',
						onClose: () => {
							this.$router.back()
						}
					})
				}
			}
		},
		methods: {
			/**
			 * 删除所选商品
			 */
			clearGoods() {
				this.form.goodsId = ''
				this.form.goodsName = ''
			},
			/**
			 * 选择的商品
			 */
			selectGoods(obj) {
				this.form.goodsId = obj.goodsId
				this.form.goodsName = obj.goodsName
				this.showGoods = false
			},
			handleSubmit() {
				this.state === 'create' ? this.createData() : this.updateData()
			},

			handleCancel() {
				this.$router.push({
					path:this.$filterPath("index"),
					query: { ac: this.$route.query.ac }
				})
			},

			/*
			 * 新增
			 * */
			createData() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '请稍后',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.3)'
						})
						const params = Object.assign({}, this.form)
						params['startUseTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
						params['endUseTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
						delete params['time']
						return new Promise((resolve, reject) => {
							insert(params).then(() => {
								loading.close()
								this.$message({
									title: '成功',
									message: '创建成功',
									type: 'success',
									duration: 1500
								})
								this.$router.back()
							}).catch(error => {
								reject(error)
								loading.close()
							})
						})
					}
				})
			},

			/**
			 * 编辑提交
			 */
			updateData() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '请稍后',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.3)'
						})
						let params = {
							...this.form
						}
						params['startUseTime'] = params.time && params.time.length > 0 ? params.time[0] : ''
						params['endUseTime'] = params.time && params.time.length > 0 ? params.time[1] : ''
						delete params['time']
						return new Promise((resolve, reject) => {
							update(params).then(() => {
								loading.close()
								this.dialogFormVisible = false
								this.$message({
									title: '成功',
									message: '编辑成功',
									type: 'success',
									duration: 2000
								})
								this.$router.back()
							}).catch(error => {
								reject(error)
								loading.close()
							})
						})
					}
				})
			},

			/**
			 * 获取详情
			 */
			getData(id) {
				const loading = this.$loading({
					lock: true,
					text: '请稍后',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.3)'
				})
				return new Promise((resolve, reject) => {
					get(id).then(res => {
						loading.close()
						const data = res.data.data
						for (const key in this.form) {
							if (key === 'time') {
								if (data['startUseTime'] && data['endUseTime']) {
									this.form[key] = [data['startUseTime'], data['endUseTime']]
								}
							} else {
								this.form[key] = data[key]
							}
						}
						console.log(this.form)
					}).catch(error => {
						loading.close()
						reject(error)
					})
				})
			}
		}
	}
</script>
<style lang="scss">
	@import '@/styles/mixin.scss';

	.welfare-coupon-manage {
		background-color: #fff;
		min-height: calc(100vh - 60px);
		max-height: calc(100vh - 60px);
		overflow: hidden;

		.manage-title {
			position: relative;
			height: 40px;
			line-height: 40px;
			padding: 0 20px;
			background-color: #ffffff;
			border-bottom: 1px solid #e5e5e5;
			font-family: PingFangSC-Medium;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			font-size: 14px;

			&:before {
				content: '';
				position: absolute;
				width: 2px;
				@include bg-color($mainColor);
				top: 13px;
				bottom: 13px;
				left: 15px;
			}
		}

		.manage-main {
			position: absolute;
			top: 50px;
			left: 0;
			right: 0;
			bottom: 52px;
			box-sizing: border-box;
			padding: 0 10px;
			overflow: hidden;

			&::-webkit-scrollbar {
				width: 8px;
				/*对垂直流动条有效*/
				height: 1px;
				/*对水平流动条有效*/
			}

			/** 滚动条轨道*/
			&::-webkit-scrollbar-track {
				box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
				background-color: white;
				border-radius: 3px;
			}

			/** 滚动条里面小方块*/
			&::-webkit-scrollbar-thumb {
				height: 32px;
				border-radius: 5px;
				box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
				background-color: #eaeaea;
			}

			&:hover {
				overflow: auto;
			}
		}

		.main-form {
			width: 1000px !important;
			margin: 0 auto;

			.line {
				text-align: center;
			}

			.form-card {
				margin-top: 20px;

				.el-card__body {
					max-width: 90%;
					margin: 0 auto;
				}
			}

			.coupon-num input {
				text-align: left;
			}

			.select-data {
				display: inline-block;
				background: rgba(246, 246, 246, 1);
				border-radius: 4px;
				font-size: 14px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding: 0 10px;
				margin-right: 5px;
				margin-bottom: 8px;

				i {
					cursor: pointer;
					padding-left: 5px;
				}
			}

			.selectbtn {
				display: inline-block;
				width: 120px;
				background: rgba(255, 255, 255, 1);
				@include border-color(1px, dotted, $mainColor);
				border-radius: 4px;
				font-size: 14px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				@include font-color($mainColor);
				text-align: center;
				cursor: pointer;
				margin-bottom: 10px;
			}
		}

		.manage-footer {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			padding: 10px 0;
			background-color: white;
			box-shadow: 0 -3px 6px #f5f5f5;
		}
	}
</style>
